import React, { Component } from 'react';
import {
    Animated,
    Easing,
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    TextInput
} from 'react-native';
var Wine = require('../shop.json');
var Dimenions = require('Dimensions');

var Width = Dimenions.get('window').width;

export default class Shop extends Component{
    constructor(props){
        super(props);
        var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
        this.animatedValue = new Animated.Value(0);
        this.state = {
            hidden: true,
            currentAlpha: 0,
            inputText: '',
            placeholder: '',
            opacity: 1,
            dataSource:ds.cloneWithRows(Wine)
        };
    }
    Animate() {
        this.state.currentAlpha = this.state.currentAlpha == 0 ? 1 : 0;//判断动画运动起止状态
        this.setState({
            opacity: 1
        });
        // this.animatedValue.setValue(0);
        Animated.timing(
            this.animatedValue,
            {
                toValue: this.state.currentAlpha,
                duration: 300,
                easing: Easing.linear
            }
        ).start();
        if (this.state.currentAlpha == 0) {
            this.refs.textInput.blur();
            this.setState({
                inputText: '',
            });
        }
    }

    //获取焦点
    _Focus() {
        this.refs.textInput.focus();
    }

    //提示文字消失
    _Opacity(text) {
        this.setState({
            inputText: text,
            opacity: 0
        });
    }
    render(){
        const ViewWidth = this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [Width * 0.9, Width * 0.8]
        });
        const Opacity = this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1]
        });
        const marginLeft = this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [Width * 0.3, Width * 0.1]
        });
        return(
            <View style={styles.container}>
                <View style={styles.search}>
                    <TouchableOpacity onPress={this.Animate.bind(this)} style={styles.image}>
                        <Animated.Text style={{
                            opacity: Opacity
                        }}>取消</Animated.Text>
                    </TouchableOpacity>
                    <Animated.View
                        style={{
                            height: 35,
                            width: ViewWidth,
                            backgroundColor: '#efefef',
                            position: 'absolute',
                            top: 0,
                            borderRadius: 10,
                            left: 10
                        }}
                    />
                    <TextInput style={styles.inputs}
                               onFocus={this.Animate.bind(this)}
                               underlineColorAndroid='transparent'
                        // placeholder= "请输入搜索关键字"
                               ref="textInput"
                               onChangeText={this._Opacity.bind(this)}
                               value={this.state.inputText}
                    />
                    <TouchableOpacity style={styles.ProText} onPress={this._Focus.bind(this)}>
                        <Animated.Text style={{
                            left: marginLeft,
                            opacity: this.state.opacity
                        }}>
                            请输入搜索关键字
                        </Animated.Text>
                    </TouchableOpacity>
                </View>

            <ListView
                style = {{backgroundColor:'white'}}
                dataSource = {this.state.dataSource}
                renderRow = {this.renderRow}
            />
            </View>
        );
    }

    renderRow(rowData,sectionID,rowID,highlightRow){
        return(
            <TouchableOpacity activeOpacity={0.4}>
                <View style={styles.cellViewStyle}>
                    <Image source={{uri:rowData.icon}} style={styles.leftImageStyle}/>
                    <View style = {styles.rightViewStyle}>
                        <Text style={styles.topTitleStyle}>{rowData.title}</Text>
                        <Text style={styles.centerTitleStyle}>{rowData.sales}                           {rowData.time}  {rowData.long}</Text>
                        <Text style={styles.bottomTitleStyle}>起送¥{rowData.money}    配送￥{rowData.start}    人均￥{rowData.Average}</Text>

                        <Text style={styles.downTitleStyle}><Image style={styles.downTitleIcon} source={require('../assets/img/abuse.png')}></Image>{rowData.type}</Text>
                    </View>
                </View>
            </TouchableOpacity>

        );
    }
}

const styles = StyleSheet.create({
    cellViewStyle:{
        padding:10,
        backgroundColor:'white',
        borderBottomWidth:0.3,
        borderBottomColor:'#e8e8e8',
        flexDirection:'row'
    },
    leftImageStyle:{
        width:90,
        height:90,
        marginRight:10,
        justifyContent:'center'
    },
    topTitleStyle:{
        color:'black',
        fontSize:20,
        width:Width * 0.8,
        marginBottom:10
    },
    bottomTitleStyle:{

    },
    rightViewStyle:{

    },
    centerTitleStyle:{

    },
    downTitleStyle:{

    },
    downTitleIcon:{
        width: 15,
        height: 15
    },
    container: {
        flex: 1,
        position: 'relative',
        top: 10
    },
    search: {
        height: 35,
        width: Width,
        position: 'relative',
        top: 0,
    },
    ProText: {
        width: Width * 0.8,
        position: 'absolute',
        top: 6,
        left: 0,
    },
    image: {
        width: Width * 0.1,
        height: Width * 0.1,
        position: 'absolute',
        top: 10,
        right: Width * 0.035,
    },
    inputs: {
        width: Width * 0.7,
        height: 30,
        borderWidth: 1,
        paddingLeft: 5,
        borderColor: '#efefef',
        borderRadius: 4,
        position: 'absolute',
        left: Width * 0.05,
        top: 4
    }
});